<template>
	<view>
		<carHeader :title="'信息修改'"></carHeader>
		<view class="only">
			<view class="one">
				<p>
					<span>负责人：</span>
					<span>
						<input type="text" placeholder="请输入负责人姓名" v-model="name" />
					</span>
				</p>
				<p>
					<span>身份证号码：</span>
					<span><input type="text" placeholder="请输入身份证号码" v-model="idNum" /></span>
				</p>
				<p>
					<span>手机号：</span>
					<span><input type="text" placeholder="请输入手机号" v-model="phone" /></span>
				</p>
				<view class="yanzheng">
					<span>验证码：</span>
					<view class="yanzheng1"><input type="text" placeholder="请输入验证码" v-model="phoneNum" /><span>|
							<view class="endSpan">
								<u-code unique-key="page-b" ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
								<text @tap="getCode2" :text="tips2" class="u-page__code-text">
									{{tips2}}</text>
							</view>
						</span>
					</view>
				</view>
				<p>
					<span>店名：</span>
					<span><input type="text" placeholder="请输入店名" v-model="shopName" /></span>
				</p>
				<p>
					<span>工商营业执照号码：</span>
					<span><input type="text" placeholder="请输入工商营业执照" v-model="businessNumber" /></span>
				</p>
				<p>
					<span>经营区域：</span>
					<view class="input" type="text" placeholder="请选择地区">
						<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
							@change="pickerChange" @columnchange="pickerColumnchange">
							<view class="">{{select}}
							<u-icon name="arrow-down" class="arrow-down"></u-icon>
							</view>
						</picker>
					</view>
				</p>
				<p>
					<span>经营地址：</span>
					<span><input type="text" placeholder="请输入经营地址" v-model="shopHome" /></span>
				</p>
			</view>
			<view class="two">
				<view class="shop1">
					商家简介
				</view>
				<view class="shop2">
					<textarea v-model="message" placeholder="请输入内容"></textarea>
				</view>
			</view>
			<view class="three">
				<view class="three1">
					身份证正反照片
				</view>
					<view class="three2">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="10" :previewFullImage="true" uploadText="上传照片"></u-upload>
					</view>
			</view>
			<view class="four">
				<view class="four1">
					营业执照
				</view>
				<view class="four2">
					<u-upload :fileList="fileList2"
					  
					 @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10" :previewFullImage="true" uploadText="上传照片"></u-upload>
				</view>	
				</view>
				
			<view class="four">
				
				<view class="four1">
					门店照片
				</view>
				
		<view class="four2">
			<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
				:maxCount="10" :previewFullImage="true" uploadText="上传照片"></u-upload>
		</view>
			</view>
			<view class="button">
				<button type="primary" @click="toUpdate">保存</button>
			</view>
		</view>
	</view>
</template>

<script>

	import AddressPicker from '../../data/AddressPicker.js';
	export default {

		data() {
			return {
				    uId:null,
					shopId:null,
					name: "",
					idNum: "",
					phone: "",
					/* 验证码 */
					phoneNum: "",
					shopName: "",
					businessNumber: null,
					shopAdress: "",
					shopHome: "",
					message: "",
					fileList1: [],
					fileList2: [],
					fileList3: [],
					businessImg:"", //营业执照
					faceImg:"", //门店照片
					idZheng:"", //身份证正面
					idFan:"", //身份证反面
					
				tips2: '',
				disabled3: false,
				oldpProvinceDataList: AddressPicker.data,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '',

				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1'
			};
		},
		onLoad(options) {
			// options是页面跳转所带来的参数
			this.shopId = options.shopId; // 获取ID  
			console.log(options.shopId); 
			console.log(this.shopId); 
			this.infoUpdate(); // 调用方法查询数据  
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
			
		},
		methods: {
			infoUpdate(){
				uni.request({
						url: 'http://localhost:8080/shop/' + this.shopId, // 你的接口地址  
						method: 'GET', // 或者 'POST'  
						// 如果是POST请求，data字段用来发送请求参数  
						// data: {  
						//   key: 'value'  
						// },  
						// 设置请求的 header  
						header: {  
						  'content-type': 'application/json' // 根据需要设置  
						  // 'Authorization': 'Bearer ' + token // 示例：添加token到header中  
						},  
						success: (res) => {  
						  // 请求成功的回调  
						  console.log('请求成功：', res.data.data);
						  // this.formParams = res.data.data;
						  this.uId = res.data.data.user.uId;
						  this.name = res.data.data.user.uName;
						  this.idNum = res.data.data.user.idNumber;
						  this.phone = res.data.data.user.pNumber;
						  this.shopName = res.data.data.shopName;
						  this.businessNumber = res.data.data.businessNumber;
						  this.select = res.data.data.area;
						  this.shopHome = res.data.data.address; 
						  this.message = res.data.data.shopJieshao; 
						  
						  let idZheng = res.data.data.idZheng; 
						  this.idZheng = idZheng;
						  
						  let idFan = res.data.data.idFan; 
						  this.idFan = idFan
						  let businessImg = res.data.data.businessImg;
						  this.businessImg = businessImg;
						  let faceImg = res.data.data.faceImg; 
						  this.faceImg = faceImg; 

						  
						  this.fileList1 = [{url: idZheng},{url:idFan}];
						  this.fileList2 = [{url: businessImg}]; // 更新fileList以显示图片
		                  this.fileList3 = [{url: faceImg}]; // 更新fileList以显示图片
						  console.log(this.fileList1);
						  console.log(this.fileList2);
						  console.log(this.fileList3);
						},  
						fail: (err) => {  
						  // 请求失败的回调  
						  console.error('请求失败：', err);  
						}  
					  });  
			},
			toUpdate(){
				uni.request({  
				    url: 'http://localhost:9299/shop/edit', // 必填，请求的URL  
				    method: 'POST', // 必填，HTTP 请求方法  
				    data: {  
				        shopId: this.shopId,
						shopName: this.shopName,
						businessNumber: this.businessNumber,
						area: this.select,
						address: this.shopHome,
						shopJieshao: this.message,
						idZheng: this.fileList1[0].url,
						idFan: this.fileList1[1].url,
						businessImg: this.fileList2[0].url,
						faceImg: this.fileList3[0].url
						 // 需要发送的数据  
				        // 可以是 string, number, object, array, boolean  
				    },  
				    header: {  
				        'content-type': 'application/json', // 默认值，如果是JSON数据，则改为'application/json'  
				        // 如果header中'content-type'为'application/json'，则data数据会自动序列化为JSON字符串  
				        // 如果header中'content-type'为'application/x-www-form-urlencoded'，则需要自己手动处理序列化  
				        // 例如：使用qs库（qs.stringify(data)）  
				        // 'Authorization': 'Bearer 访问令牌' // 示例：添加请求头  
				    },  
				    success: (res) => {  
				        // 请求成功时执行  
				        console.log('请求成功:', res.data);  
				    },  
				    fail: (err) => {  
				        // 请求失败时执行  
				        console.error('请求失败:', err);  
				    }  
				});
				uni.request({
				    url: 'http://localhost:9299/UserGuanli/edit', // 必填，请求的URL  
				    method: 'POST', // 必填，HTTP 请求方法  
				    data: {  
					    uId: this.uId,
				        uName:  this.name,
						idNumber: this.idNum,
						pNumber: this.phone
						 // 需要发送的数据  
				        // 可以是 string, number, object, array, boolean  
				    },  
				    header: {  
				        'content-type': 'application/json', // 默认值，如果是JSON数据，则改为'application/json'  
				        // 如果header中'content-type'为'application/json'，则data数据会自动序列化为JSON字符串  
				        // 如果header中'content-type'为'application/x-www-form-urlencoded'，则需要自己手动处理序列化  
				        // 例如：使用qs库（qs.stringify(data)）  
				        // 'Authorization': 'Bearer 访问令牌' // 示例：添加请求头  
				    },  
				    success: (res) => {  
				        // 请求成功时执行  
				        console.log('请求成功:', res.data);  
				    },  
				    fail: (err) => {  
				        // 请求失败时执行  
				        console.error('请求失败:', err);  
				    }  
				});
				
				uni.navigateTo({
					url: "/pages/shopUser/shopUser"
				})
			},
		
		
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				if (this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode2.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost:8080/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						method:'post',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data.url)
							}, 1000)
							console.log(res.data);
							console.log(JSON.parse(res.data).data.url);
							
						}
					});
				})
			},
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]} ${this.newProvinceDataList[1][this.multiIndex[1]]} ${this.newProvinceDataList[2][this.multiIndex[2]]}`;
			},
			pickerColumnchange(e) {
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						// console.log(item)
						return item.name
					})
					// console.log(this.multiIndex)
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							// console.log(item)
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
			}
		}
	}
</script>

<style lang="scss">
	.only {
		margin: 0 20rpx;
		position: relative;
		top: -240rpx;

		.one {
			font-weight: 550;
			font-size: 30rpx;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 40rpx 30rpx;
			.input{
				display: inline-block;
	            border: 1rpx solid #f0f0f0;
				width: 330rpx;
				padding: 0 20rpx;
				border-radius: 50rpx;
				.arrow-down {
					position: relative;
					top: -45rpx;
					left: 300rpx;
				}
			}
			.yanzheng {
				height: 60rpx;
				line-height: 60rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.yanzheng1 {
					display: flex;
					justify-content: space-between;
					border: 1rpx solid #f0f0f0;
					border-radius: 50rpx;

					span {
						width: 180rpx;
						font-size: 24rpx;
						color: #f0f0f0;
					}

					input {
						width: 150rpx;
						border: none;
					}

					.endSpan {
						display: inline-block;
						color: #4886f0;
						margin-left: 10rpx;
					}
				}
			}

			input {
				border: 1rpx solid #f0f0f0;
				line-height: 60rpx;
				padding: 15rpx 20rpx;
				border-radius: 50rpx;
				width: 330rpx;
				font-size: 24rpx;
			}

			p {
				height: 60rpx;
				line-height: 60rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.two {
			background-color: #fff;
			border-radius: 50rpx;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;

			.shop1 {
				font-weight: 550;
				font-size: 30rpx;
			}

			.shop2 {
				margin-top: 20rpx;
				font-size: 24rpx;
				border: 1rpx solid #f0f0f0;
				padding: 20rpx;
				border-radius: 50rpx;
			}
		}

		.three {
			background-color: #fff;
			border-radius: 50rpx;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;

			.three1 {
				font-weight: 550;
				font-size: 30rpx;
			}

			.three2 {
				margin-top: 10rpx;
				height: 160rpx;

				image {
					position: relative;
					top: -150rpx;
					width: 200rpx;
					margin-right: 40rpx;
				}
			}
		}

		.four {
			background-color: #fff;
			border-radius: 50rpx;
			padding: 40rpx 30rpx;
			margin-top: 20rpx;

			.four1 {
				font-weight: 550;
				font-size: 30rpx;
			}

			.four2 {
				margin-top: 10rpx;
				height: 160rpx;

				image {
					position: relative;
					top: -150rpx;
					width: 200rpx;
					margin-right: 40rpx;
				}
			}
		}
		.button{
			margin: 50rpx 93.75rpx 0 93.75rpx;
			width: 75%;
		}
	}
</style>